<template>
  <div>
    <VueCropper
      class="qa"
      img="https://img01.yzcdn.cn/vant/cat.jpeg"
      autoCrop
      fixed
      centerBox
      autoCropWidth="120"
      autoCropHeight="120"
      ref="cropper"
    ></VueCropper>
    <div class="btns">
      <van-button type="primary" @click="qx">取消</van-button>
      <van-button type="primary" @click="qd">确定</van-button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  methods: {
    qd() {
      this.$refs.cropper.getCropBlob((data) => {
        // do something
        console.log(data)
        this.$refs.cropper.getCropData((data) => {
          // do something
          console.log(data)
        })
      })
    },
    qx() {}
  }
}
</script>

<style lang="less" scoped>
.qa {
  position: absolute;
  width: 100%;
  height: 80%;
  top: 0;
  left: 0;
  z-index: 999;
}
.btns {
  position: absolute;
  bottom: 75px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>
